<template>
	<view class="repair-history-container">

		<view class="search-row">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input class="search-input" v-model="keyword" placeholder="维修单号" />
			</view>
			<text class="icon-btn" @click="openFilter">⚙️</text>
		</view>

		<view class="filters">
			<picker :range="orderOptions" @change="e=>orderIndex=e.detail.value"><view class="pill">{{ orderOptions[orderIndex] }}</view></picker>
			<picker :range="typeOptions" @change="e=>typeIndex=e.detail.value"><view class="pill">{{ typeOptions[typeIndex] }}</view></picker>
		</view>

		<view class="card" v-for="item in filteredList" :key="item.id">
			<text class="num">维修单号：{{ item.workNo || '-' }}</text>
			<!-- 去掉报修单号显示 -->
			<text class="row">发生时间：{{ item.time || '-' }}</text>
			<text class="row">报修类型：{{ item.reportType || '-' }}</text>
			<text class="row">故障类型：{{ item.faultType || '-' }}</text>
		</view>
	</view>
</template>

<script>
import assetApi from '@/api/asset/asset.js'
export default {
		data() {
			return {
				keyword: '',
				orderOptions: ['时间排序','状态排序'], orderIndex: 0,
				typeOptions: ['故障类型','保养类型'], typeIndex: 0,
			list: [],
			assetNo: ''
			}
		},
		onLoad(query) {
			this.assetNo = query && query.assetNo || '';
			this.fetchHistory();
		},
		computed: {
			filteredList() {
				return this.list.filter(i => !this.keyword || (i.time + i.reportType + i.faultType).includes(this.keyword));
			}
		},
		methods: {
			openFilter() { uni.showToast({ title:'筛选开发中', icon:'none' }); },
			goBack() { uni.navigateBack({ delta: 1 }); },
			async fetchHistory() {
				try {
					const res = await assetApi.getAssetRepairHistory({ assetNo: this.assetNo, pageNum:1, pageSize:20 });
					const rows = res.rows || res.data || [];
					this.list = rows.map((r, idx) => ({
						id: r.id || r.workNo || r.reportNo || idx,
						workNo: r.workNo,
						reportNo: r.reportNo,
						time: r.createTime || r.reportTime || r.startTime || '-',
						reportType: r.reportTypeName || r.reportType || '-',
						faultType: r.faultTypeName || r.faultType || '-'
					}));
				} catch(e) {
					console.error('获取维修履历失败', e);
					uni.showToast({ title:'获取维修履历失败', icon:'none' });
				}
			}
		}
	}
</script>

<style>
	.repair-history-container { min-height:100vh; background:#f5f6f8; }
	.title { font-size: 32rpx; font-weight:600; }

	.search-row { display:flex; align-items:center; gap: 16rpx; padding: 16rpx 20rpx; background:#fff; }
	.search-box { flex:1; display:flex; align-items:center; background:#f1f2f6; border-radius: 28rpx; padding: 12rpx 20rpx; }
	.search-icon { margin-right: 12rpx; color:#999; }
	.search-input { flex:1; font-size: 26rpx; }
	.icon-btn { width: 60rpx; text-align:center; }
	.filters { display:flex; gap:16rpx; padding: 10rpx 20rpx; background:#fff; }
	.pill { padding: 10rpx 16rpx; background:#f1f2f6; border-radius: 28rpx; font-size:24rpx; color:#666; }
	.card { background:#fff; margin: 16rpx 20rpx; border-radius: 16rpx; padding: 18rpx; box-shadow:0 2rpx 12rpx rgba(0,0,0,.06); }
	.num { display:block; font-size: 30rpx; font-weight: 600; margin-bottom: 8rpx; }
	.row { display:block; font-size: 24rpx; color:#666; margin: 2rpx 0; }
</style>

